<template>
  <Dropdown
    ref="dropdown"
    @on-click="handleClick"
    :class="hideTitle ? '' : 'collased-menu-dropdown'"
    :transfer="hideTitle"
    :placement="placement"
  >
    <a
      class="drop-menu-a"
      type="text"
      @mouseover="handleMousemove($event, children)"
      :style="{ textAlign: !hideTitle ? 'left' : '' }"
      ><common-icon
        :size="rootIconSize"
        :color="textColor"
        :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{
        showTitle(parentItem)
      }}</span
      ><Icon
        style="float: right;"
        v-if="!hideTitle"
        type="ios-arrow-forward"
        :size="16"
    /></a>
    <DropdownMenu ref="dropdown" slot="list">
      <template v-for="child in children">
        <collapsed-menu
          v-if="showChildren(child)"
          :icon-size="iconSize"
          :parent-item="child"
          :key="`drop-${child.name}`"
        ></collapsed-menu>
        <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name"
          ><common-icon :size="iconSize" :type="child.icon" /><span
            class="menu-title"
            >{{ showTitle(child) }}</span
          ></DropdownItem
        >
      </template>
    </DropdownMenu>
  </Dropdown>
</template>
<script>
import mixin from "./mixin";
import itemMixin from "./item-mixin";
import { findNodeUpperByClasses } from "@/libs/util";

export default {
  name: "CollapsedMenu",
  mixins: [mixin, itemMixin],
  props: {
    hideTitle: {
      type: Boolean,
      default: false
    },
    rootIconSize: {
      type: Number,
      default: 16
    }
  },
  data() {
    return {
      placement: "right-end"
    };
  },
  methods: {
    handleClick(name) {
      this.$emit("on-click", name);
    },
    handleMousemove(event, children) {
      const { pageY } = event;
      const height = children.length * 38;
      const isOverflow = pageY + height < window.innerHeight;
      this.placement = isOverflow ? "right-start" : "right-end";
    }
  },
  mounted() {
    let dropdown = findNodeUpperByClasses(this.$refs.dropdown.$el, [
      "ivu-select-dropdown",
      "ivu-dropdown-transfer"
    ]);
    if (dropdown) dropdown.style.overflow = "visible";
  }
};
</script>
